import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:get/get.dart';
import 'package:yysk_app/pages/nft_pages/home_pages/news_detail/news_detail_controller.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';

class NewsDetailPage extends GetView<NewsDetailController> {
  static const path = '/newsDetail';
  const NewsDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: CustomAppBar(title: '公告详情', context: context),
      body: Obx(() {
        var detail = controller.detail.value;
        double top = MediaQuery.of(context).padding.top;
        return Stack(
          children: [
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: ImageAssetWidget(
                width: 375.px,
                height: 812.px,
                imageUrl: 'static/images/bg.png',
              ),
            ),
            Container(
              padding: EdgeInsets.fromLTRB(0, top, 0, 0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // SizedBox(height: top),
                  CustomAppBar2(title: '', context: context),
                  Expanded(
                    child: ListView(
                      padding: EdgeInsets.all(0),
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                            left: 25.px,
                            right: 25.px,
                            top: 0,
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(height: 12.px),
                              controller.title.value.isNotEmpty
                                  ? Text(
                                    '${controller.title.value ?? ''}',
                                    style: TextStyle(
                                      fontSize: 17.px,
                                      fontWeight: FontWeight.bold,
                                      color: AppColors.fontColor,
                                    ),
                                  )
                                  : SizedBox(),
                              controller.title.value.isNotEmpty
                                  ? SizedBox(height: 16.px)
                                  : SizedBox(),
                              controller.labelName.value.isNotEmpty
                                  ? Container(
                                    constraints: BoxConstraints(
                                      minWidth: 10.px,
                                    ),
                                    decoration: BoxDecoration(
                                      color: Color.fromRGBO(31, 33, 38, 1),
                                      borderRadius: BorderRadius.circular(2.px),
                                    ),
                                    padding: EdgeInsets.only(
                                      left: 4.px,
                                      right: 4.px,
                                    ),
                                    child: Text(
                                      '${controller.labelName ?? ''}',
                                      style: TextStyle(
                                        color: AppColors.fontColorGrey,
                                      ),
                                      overflow: TextOverflow.clip,
                                    ),
                                  )
                                  : SizedBox(),
                              controller.createTime.value.isNotEmpty
                                  ? SizedBox(height: 16.px)
                                  : SizedBox(),
                              controller.createTime.value.isNotEmpty
                                  ? Text(
                                    controller.createTime.value ?? '',
                                    style: TextStyle(
                                      fontSize: 12.px,
                                      color: AppColors.fontColorGrey,
                                    ),
                                  )
                                  : SizedBox(),
                              SizedBox(height: 12.px),
                              HtmlWidget(
                                '''
                          ${controller.content.value}
                    ''',
                                textStyle: const TextStyle(
                                  color: AppColors.fontColorGrey,
                                ),
                                customWidgetBuilder: (element) {
                                  if (element.localName == 'img') {
                                    // consoleLog('String===${element.attributes['src']}');
                                    return LazyImage(
                                      imageUrl: '${element.attributes['src']}',
                                      boxFit: BoxFit.fitWidth,
                                      width: context.width,
                                      aotuHeight: true,
                                    );
                                  }
                                  return null;
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      }),
    );
  }
}
